<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-1.8.2.js"></script>
<script src="layui/layui.js"></script>
 <link rel="stylesheet" href="layui/css/layui.css"/>
</head>
<body>

<table id="car" lay-filter="test"></table>
	
	
	<!-- 头部工具栏 -->
	<script type="text/html" id="tianjia">
  	<div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>   
  	</div>
	</script>
	<!-- 行内工具栏 -->
	<script type="text/html" id="barDemo">
 		 <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>

<script>
		layui.use([ 'table', 'layer', 'form' ], function() {
			var layer = layui.layer;
			var table = layui.table;
			var form = layui.form;
			
			
			
			table.render({//读取
				elem : '#car',
				height : 600,
				url : '/wzsck/CarClassQuerySerblet', //数据接口
				page : true, //开启分页
				toolbar : '#tianjia', //开启头部工具栏，并为其绑定左侧模板
				cellMinWidth : 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
				cols : [ [ //表头
					{field : 'classid',title : 'classid',sort : true,fixed : 'left'}, 
					{field : 'classname',title : 'classname'}, 
					{fixed : 'right',align : 'center',toolbar : '#barDemo'} 
					] ]
			});
			
			//头工具栏事件添加add
			table.on('toolbar(test)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
				//自定义头工具栏右侧图标 - 提示
				case 'add':
					
					layer.open({
						type : 2, //Page层类型
						area : [ '600px', '500px' ],
						title : [ '添加', 'font-size:18px' ],
						shadeClose : true,
						shade : 0, //遮罩透明度
						maxmin : true, //允许全屏最小化
						content : "carclassadd.html", //弹窗路径
						success : function(layero, index) {}
					});
					break;				
				};
			});	
			
			
			
			//监听工具条
			table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			  var data = obj.data; //获得当前行数据
			  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			  var tr = obj.tr; //获得当前行 tr 的DOM对象
			 
			  if(layEvent === 'del'){ //删除
				
			    layer.confirm('真的删除行么', function(index){
			      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
			      layer.close(index);
			      //向服务端发送删除指令
			      $.ajax({
						url : "/wzsck/CarClassDelServlet",//地址
						type : "get",//请求方式
						data : {//参数
							classid : data.classid
						},success : function(res) {//成功以后的回调函数
							if (res == 1) {alert("删除成功！");window.location.reload();} else {alert("删除失败！");}
						}
					});
			    });
			  } else if(layEvent === 'edit'){ //编辑
			    //do something
			   
			    //同步更新缓存对应的值			
					layer.open({
						type : 1, //1Page层类型 2为页面
						area : [ '500px', '500px' ],
						title : [ '修改', 'font-size:18px' ],
						shadeClose : true,
						shade : 0, //遮罩透明度
						maxmin : true, //允许全屏最小化
						content : $("#lbteditfrom"), //弹窗路径
						success : function(layero, index) {
							$('#carclassid').val(data.classid);
							$('#carclassname').val(data.classname);			
						},
					});
					layui.use([ 'laydate', 'form' ], function() {
						var laydate = layui.laydate;
						var form = layui.form;
						//执行一个laydate实例
						form.on('submit(btn)', function(data) {
							
							console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
							console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
							console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
							data.field.imgurl = $("img").attr("src");
							//写对应ajax
							$.ajax({
								url : "/wzsck/CarClassUpdateServlet",//地址
								type : "get",//请求方式
								data : data.field,
								success : function(res) {//成功以后的回调函数
									if (res == 1) {alert("修改成功！");window.location.reload();} else {alert("修改失败！");}
								}
							});				
							return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
						});
					});
			  }
			});			
			
			})
			

 
</script>

	<div id="lbteditfrom"style="display: none">
	<form class="layui-form">
		<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
		<div class="layui-form-item">
			<label class="layui-form-label" >id</label>
			<div class="layui-input-block">
				<input type="text" name="carclassid" placeholder="请输入" autocomplete="off"class="layui-input" id="carclassid">
			</div>
		</div>	
		<div class="layui-form-item">
			<label class="layui-form-label" >车类</label>
			<div class="layui-input-block">
				<input type="text" name="carclassname"  placeholder="请输入" autocomplete="off"class="layui-input" id="carclassname">
			</div>
		</div>	
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="btn">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
		<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
	</form>
	</div>
	
</body>
</html>